<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>管理员主界面</title>
    <!--<link rel="stylesheet" href="https://heerey525.github.io/layui-v2.4.3/layui-v2.4.5/css/layui.css">-->
    <link rel="stylesheet" href="../static/layui/css/layui.css" media="all">
</head>
<body>

<div class="layui-layout layui-layout-admin">
    <!--头部导航栏-->
    <div class="layui-header">
        <a href="" th:href="@{/index}">
            <div class="layui-logo layui-hide-xs layui-bg-black">
                <i class="layui-icon layui-icon-home" style="font-size: 35px"></i> 主页
            </div>
        </a>

        <!-- 头部区域（可配合layui 已有的水平导航） 导航栏 -->
        <ul class="layui-nav layui-layout-left">
            <!-- 移动端显示 -->
            <li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
                <i class="layui-icon layui-icon-spread-left"></i>
            </li>
            <li class="layui-nav-item layui-hide-xs"><a href="" th:href="@{/index}">查看全部信息</a></li>
            <li class="layui-nav-item layui-hide-xs"><a id="addEmp">添加新员工</a></li>
            <!--<li class="layui-nav-item layui-hide-xs"><a id="getGrade">导入员工信息表格</a></li>-->
        </ul>
        <!--导航栏右边个人信息-->
        <ul class="layui-nav layui-layout-right ">
            <span style="color: white;border: solid 0px;"
                  class="layui-btn  layui-btn-lg layui-btn-primary layui-border-danger">
                <i class="layui-icon layui-icon-console" style="font-size: 25px"></i>
                <strong th:include="time"></strong>
            </span>
            <li class="layui-nav-item" lay-header-event="menuRight" lay-unselect>
                <a href="javascript:;">
                    <i class="layui-icon layui-icon-notice" style="font-size: 18px"></i>请假消息
                    <span class="layui-badge" id="leaveRequestSum"></span>
                </a>
            </li>
            <li class="layui-nav-item layui-hide layui-show-md-inline-block" style="margin-right: 20px">
                <a href="javascript:;">
                    <span id="userName" th:text="${session.admin.getAdminNumber()}"></span>
                </a>
                <dl class="layui-nav-child">
                    <dd><a>详细信息</a></dd>
                    <dd><a>设置</a></dd>
                    <dd><a href="" th:href="@{/logout}">退出</a></dd>
                </dl>
            </li>
            <button class="layui-btn layui-btn-radius layui-btn-primary layui-border-green">
                <i class="layui-icon layui-icon-group" style="font-size: 18px"></i>在线人数:
                <span th:text="${application.loginCount}"></span></button>
        </ul>
    </div>

    <!--左侧导航栏-->
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree" lay-filter="test">
                <li class="layui-nav-item ">
                    <a href="" th:href="@{/index}">员工信息管理</a>
                </li>
                <li class="layui-nav-item">
                    <a href="" th:href="@{/punch}">打卡记录处理 </a>
                </li>
                <li class="layui-nav-item"><a href="" th:href="@{/news}">通知新闻界面</a></li>
                <li class="layui-nav-item"><a href="" th:href="@{/logout}">退出</a></li>
            </ul>
        </div>
    </div>
    <strong th:text="${mess}" id="messInfo" style="display: none"></strong>
    <div class="layui-body"><br>
        <table class="layui-hide" id="allEmp" lay-filter="allEmp" style="margin-top: -50px"></table>
    </div>


    <!--<div class="layui-footer">
      &lt;!&ndash; 底部固定区域 &ndash;&gt;
      底部固定区域
    </div>-->
</div>
</body>
<!--<script src="https://heerey525.github.io/layui-v2.4.3/layui-v2.4.5/layui.js"></script>-->
<script src="../static/layui/layui.js"></script>
<script src="../static/js/jquery-3.1.0.js"></script>


<!--表格操作栏-->
<script type="text/html" id="allEmp-table-toolbar">
    <a class="layui-btn layui-btn-xs layui-border-orange layui-btn-radius layui-btn-primary" lay-event="edit"
       title="编辑员工信息">
        <div class="layui-icon layui-icon-edit"></div>
    </a>
    <a class="layui-btn layui-btn-xs layui-border-blue layui-btn-radius layui-btn-primary" lay-event="query"
       title="详细信息">
        <div class="layui-icon layui-icon-friends"></div>
    </a>
    <a class="layui-btn layui-border-red layui-btn-xs layui-btn-radius layui-btn-primary" lay-event="del"
       title="删除员工信息">
        <div class="layui-icon layui-icon-delete"></div>
    </a>
    <a class="layui-btn layui-border-green layui-btn-xs layui-btn-radius layui-btn-primary" lay-event="getEmpPass"
       title="查看员工密码">
        <div class="layui-icon layui-icon-key"></div>
    </a>
</script>

<!--表格头部工具栏-->
<script type="text/html" id="allEmp-table-head-toolbar">
    <div class="test-table-reload-btn">
        <div class="layui-inline">
            <input class="layui-input" id="emp" autocomplete="off" style="border: black solid 1px"
                   placeholder="输入员工号或者姓名">
        </div>
        <a class="layui-btn layui-btn-primary layui-border-green" lay-event="queryByNumber">搜索</a>
        <a class="layui-btn layui-btn-primary layui-border-green" lay-event="search">高级搜索</a>
        <a class="layui-btn layui-btn-radius layui-btn-primary layui-border-green" lay-event="download-all"
           style="float:right;margin-right: 20px">
            <div class="layui-icon layui-icon-download-circle"> 导出表格</div>
        </a>
        <!--<a class="layui-btn layui-btn-radius layui-btn-primary layui-border-green" lay-event="import-emp"
           style="float:right;">
            <div class="layui-icon layui-icon-upload"> 导入表格</div>
        </a>
        <a class="layui-btn layui-btn-radius layui-btn-primary layui-border-green" lay-event="download-temp"
           style="float:right;">
            <div class="layui-icon layui-icon-table"> 导入模板</div>
        </a>-->
    </div>
</script>

<!--添加员工信息盒子-->
<div id="add-info-box" style="display: none;margin-top: 30px">
    <form class="layui-form">

        <div class="layui-form-item">
            <div class="layui-col-lg5">
                <label class="layui-form-label">联系电话</label>
                <div class="layui-input-block">
                    <input type="text" id="addEmpTel" required lay-verify="required" placeholder="输入员工联系电话"
                           autocomplete="off" class="layui-input" style="border: #009f95 solid 1px"
                           onkeyup="checkAddTel()">
                </div>
            </div>
            <div class="layui-form-mid layui-word-aux" style="margin-left: 20px"><span style="color: red"
                                                                                       id="checkTel"></span></div>
        </div>

        <div class="layui-form-item">
            <div class="layui-col-lg5">
                <label class="layui-form-label">电子邮箱</label>
                <div class="layui-input-block">
                    <input type="text" id="addEmpEmail" required lay-verify="required" placeholder="输入员工电子邮箱"
                           autocomplete="off" class="layui-input" style="border: #009f95 solid 1px"
                           onkeyup="checkAddEmail()">
                </div>
            </div>
            <div class="layui-form-mid layui-word-aux" style="margin-left: 20px"><span style="color: red"
                                                                                       id="checkEmail"></span></div>
        </div>

        <div class="layui-form-item">
            <div class="layui-col-lg5">
                <label class="layui-form-label">员工姓名</label>
                <div class="layui-input-block">
                    <input type="text" id="addEmpName" required lay-verify="required" placeholder="输入员工姓名"
                           autocomplete="off" class="layui-input" style="border: #009f95 solid 1px">
                </div>
            </div>
            <div class="layui-col-lg5">
                <div class="layui-inline">
                    <label class="layui-form-label">出生日期</label>
                    <div class="layui-input-inline" style="border: #009f95 solid 1px">
                        <input type="text" class="layui-input" id="test-laydate-format-date1" placeholder="点击选择出生日期"
                               required autocomplete="off" lay-verify="required">
                    </div>
                </div>
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-col-lg5">
                <label class="layui-form-label">入职部门</label>
                <div class="layui-input-block" style="border: #009f95 solid 1px">
                    <select lay-verify="required" id="addEmpDepartment" autocomplete="off">
                        <option value=""></option>
                        <option value='服务部'>服务部</option>
                        <option value='办公室'>办公室</option>
                        <option value='财务部'>财务部</option>
                        <option value='企划部'>企划部</option>
                        <option value='产品部'>产品部</option>
                        <option value='后勤部'>后勤部</option>
                    </select>
                </div>
            </div>
            <div class="layui-col-lg5">
                <label class="layui-form-label">入职岗位</label>
                <div class="layui-input-block" style="border: #009f95 solid 1px">
                    <select lay-verify="required" id="addEmpPosition" autocomplete="off">
                        <option value=""></option>
                        <option value='部长'>部长</option>
                        <option value='副部长'>副部长</option>
                        <option value='普通职工'>普通职工</option>
                    </select>
                </div>
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-col-lg5">
                <label class="layui-form-label">性别</label>
                <div class="layui-input-block" style="border: #009f95 solid 1px">
                    <select lay-verify="required" id="addEmpGender" autocomplete="off">
                        <option value=""></option>
                        <option value='男'>男</option>
                        <option value='女'>女</option>
                    </select>
                </div>
            </div>
            <div class="layui-col-lg5">
                <label class="layui-form-label">学历</label>
                <div class="layui-input-block" style="border: #009f95 solid 1px">
                    <select lay-verify="required" id="addEmpEdu" autocomplete="off">
                        <option value=""></option>
                        <option value='本科'>本科</option>
                        <option value='研究生'>研究生</option>
                        <option value='大专'>博士</option>
                        <option value='大专'>大专</option>
                        <option value='中专'>中专</option>
                        <option value='高中'>高中</option>
                        <option value='初中'>初中</option>
                        <option value='小学'>小学</option>
                        <option value='其它'>其它</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-col-lg12">
                <label class="layui-form-label">居住地址</label>
                <div class="layui-inline" style="border: #009f95 solid 1px">
                    <select name="province" id="province" lay-verify="required" lay-search lay-filter="province"
                            autocomplete="off">
                        <option value="">省份</option>
                    </select>
                </div>
                <div class="layui-inline" style="border: #009f95 solid 1px">
                    <select name="city" id="city" lay-verify="required" lay-search lay-filter="city" autocomplete="off">
                        <option value="">地级市</option>
                    </select>
                </div>
                <div class="layui-inline" style="border: #009f95 solid 1px">
                    <select name="district" id="district" lay-verify="required" lay-search>
                        <option value="">县/区</option>
                    </select>
                </div>
            </div>
        </div>

        <div class="layui-form-item">
            <div class="layui-col-lg11">
                <label class="layui-form-label">详细地址</label>
                <div class="layui-input-block">
                    <input type="text" id="addEmpDetailAd" required lay-verify="required"
                           placeholder="输入员工居住详细地址，精确到门牌号" autocomplete="off" class="layui-input"
                           style="border: #009f95 solid 1px">
                </div>
            </div>
        </div>

        <br>
        <div class="layui-form-item">
            <div style="margin-left: 330px">
                <button class="layui-btn" id="add-emp-btn">提交信息</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置信息</button>
            </div>
        </div>
    </form>
</div>

<!--员工请假消息盒子-->
<div id="leave-mes-box" style="margin-left:30px;display :none;width: 300px;">
</div>


<script type="text/javascript">
    //JS
    layui.use(['element', 'layer', 'util', 'jquery', 'table'], function () {
        var element = layui.element
            , layer = layui.layer
            , util = layui.util
            , table = layui.table
            , admin = layui.admin
            , $ = layui.jquery;


        /*检测出request域中的信息*/
        let mess = $("#messInfo").text();
        if (mess == null || mess === "") {
        } else {
            layer.msg(mess, {offset: '250px', time: 1500, anim: 6});
            $("#messInfo").text("");
        }
        getLeaveRequestSum();

        function getLeaveRequestSum() {
            let url = "getLeaveRequestSum";
            let param = {};
            $.get(url, param, function (res) {
                $("#leaveRequestSum").html(res);
            });
        }

        //头部事件
        util.event('lay-header-event', {
            //左侧菜单事件
            menuLeft: function (othis) {
                layer.msg('展开左侧菜单的操作', {icon: 0});
            }
            , menuRight: function () {
                var ii = layer.load(0, {shade: false});
                setTimeout(function () {
                    let url = "/getEmpLeaveRequest";
                    let param = {};
                    $.get(url, param, function (res) {
                        layer.close(ii);
                        $("#leave-mes-box").html("");
                        if (res.count == 0 || res.count === "0") {
                            let leaveRows = '<h3>暂时没有未处理的请假请求</h3>';
                            $("#leave-mes-box").append(leaveRows);
                        } else {
                            for (let i = 0; i < res.data.length; i++) {
                                let leaveRows = '<div  style="background-color: #009f95;color: #303030;padding: 5px;border-top-left-radius: 9px;border-top-right-radius: 9px;margin-top: 20px;border: #303030 solid 1px;" >\n' +
                                    '        <h3 style="margin-left: 10px">工  &nbsp;&nbsp;&nbsp;号：' + res.data[i].empNumber + '</h3>\n' +
                                    '        <h3 style="margin-left: 10px">' + res.data[i].empName + ' &nbsp;&nbsp;&nbsp;' + res.data[i].department + '：' + res.data[i].empPosition + '</h3>\n' +
                                    '    </div>\n' +
                                    '    <div  style="padding: 15px;border-left: #303030 solid 1px;border-right: #303030 solid 1px;">\n' +
                                    '        <strong>请假时间：</strong>' + res.data[i].leaveDate + res.data[i].leaveTime + '<br><br>\n' +
                                    '        <strong>请假理由：</strong>' + res.data[i].reason +
                                    '    </div>\n' +
                                    '    <div  style="margin-bottom:  10px;border: #303030 solid 1px;border-top: none">\n' +
                                    '        <button id="agree" class="layui-btn layui-btn-sm layui-btn-normal layui-btn-radius agree" style="margin-left: 160px" href="' + res.data[i].id + '" >批准</button>\n' +
                                    '        <button id="disagree" class="layui-btn layui-btn-sm layui-btn-danger layui-btn-radius disagree" style="margin-left: 10px" href="' + res.data[i].id + '">不批准</button><br><br>\n' +
                                    '    </div>';
                                $("#leave-mes-box").append(leaveRows);
                            }
                        }
                    });
                });
                layer.open({
                    type: 1
                    , content: $("#leave-mes-box")
                    , area: ['360px', '100%']
                    , offset: 'rt' //右上角
                    , anim: 5
                    , shadeClose: true
                    , end: function (res) {
                        $("#leave-mes-box").css("display", 'none');
                    }
                });
            }
        });


        //处理员工请假处理
        //批准请假
        $(document).delegate("#agree", "click", function () {
            let requestId = $(this).attr("href");//获得元素的属性值
            layer.confirm('确定批准该员工的请假请求吗？', function () {
                dealLeaveRequest(1, requestId)
            });
            return false;
        });
        //不批准
        $(document).delegate("#disagree", "click", function () {
            let requestId = $(this).attr("href");//获得元素的属性值
            layer.confirm('确定不批准该员工的请假请求吗？', function () {
                dealLeaveRequest(2, requestId)
            });
            return false;
        });

        function dealLeaveRequest(result, requestId) {
            var ii = layer.load(0, {shade: false});
            setTimeout(function () {
                let url = "dealLeaveRequest";
                let param = {result: result, requestId: requestId};
                $.get(url, param, function (res) {
                    layer.closeAll();
                    if (res === true || res === "true") {
                        layer.open({
                            type: 1,
                            skin: 'layui-layer-admin',
                            closeBtn: false,
                            area: '350px',
                            anim: 5,
                            icon: 1,
                            content: '<div class="layui-col-md12" style="padding: 20px" id="del-box">' +
                                '        <h3>处 理 成 功 !</h3>' +
                                '        <button class="layui-btn" style="float: right;margin-top: 20px" id="check-rquerst-ok">确定</button>' +
                                '    </div>',
                            title: '处理结果'
                        });
                        //执行删除操作前管理员要输入管理员操作密码
                        $("#check-rquerst-ok").click(function () {
                            window.location = '/index';
                        });
                    } else {
                        layer.alert('处理失败', {skin: 'layui-layer-molv'});
                    }
                });
            });
        }


        /*获取所有学生信息*/
        table.render({
            elem: '#allEmp'
            /*,toolbar: 'default'*/
            , toolbar: '#allEmp-table-head-toolbar'
            , height: 560
            , url: '/getAllEmp'
            , skin: 'line'
            , title: '所有员工信息'
            , cols: [
                [
                    {field: 'empId', fixed: 'left', title: '员工ID', align: 'center', width: 80}
                    , {field: 'empNumber', fixed: 'left', title: '员工工号', align: 'center', width: 120}
                    , {field: 'empName', fixed: 'left', title: '姓名', align: 'center', width: 80}
                    , {field: 'department', title: '部门', align: 'center', width: 80}
                    , {field: 'empPosition', title: '职位', align: 'center', width: 80}
                    , {field: 'empGender', title: '性别', align: 'center', width: 50}
                    , {
                    field: 'imgPath', title: '照片', align: 'center', width: 80, templet: function (res) {
                        return '<img src="../static/images/' + res.imgPath + '" class="layui-nav-img">'

                    }
                }
                    , {field: 'empTel', title: '联系电话', align: 'center', width: 120}
                    , {
                    field: 'empEmail', title: '邮箱', align: 'center', width: 200, templet: function (res) {
                        return '<em>' + res.empEmail + '</em>'

                    }
                }
                    , {field: 'addTime', title: '入职时间', align: 'center', width: 110}
                    , {field: 'address', title: '住址', align: 'center', width: 300}
                    , {field: 'education', title: '学历', align: 'center', width: 80}
                    , {field: 'birthday', title: '出生日期', align: 'center', width: 110}
                    , {fixed: 'right', title: '操作', align: 'center', toolbar: '#allEmp-table-toolbar', width: 200}
                ]
            ]
            , limits: [10, 20, 30]
            , text: {none: '暂无相关数据', error: '出错了'}
            , loading: true
            , page: true
        });

        //头工具栏事件
        table.on('toolbar(allEmp)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            if (obj.event === 'queryByNumber') {
                let emp = $("#emp").val();
                if (null == emp || "" === emp) {
                    layer.msg('请输入姓名或者员工号', {offset: '250px', time: 1500, anim: 6});
                } else {
                    table.reload('allEmp', {
                        url: '/queryEmpByNameOrNumber'
                        , where: {emp: emp} //设定异步数据接口的额外参数
                        , page: {
                            curr: this.page //重新从第 1 页开始
                        }
                    });
                }
            } else if (obj.event === 'download-all') {
                /*let url = "downLoadAllEmpFile";
                let param = {fileName:"全部员工信息.xls"};
                $.post(url,param,function (data) {
                    window.open("http://localhost:80/static/downLoad/全部员工信息.xls")
                });*/
                $.ajax({
                    type: "post",
                    url: "/downLoadAllEmpFile",
                    dataType: "json",
                    statusCode: {
                        200: function () {
                            console.log("成功导出！")
                            window.open("http://localhost:80/download/全部员工信息.xls")
                        }
                    }
                })


            }


        });


        //操作栏监听事件
        table.on('tool(allEmp)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {  //删除员工信息
                layer.confirm('要删除工号为 ' + data.empNumber + ' 的员工信息吗？', function () {
                    layer.closeAll('dialog');
                    layer.open({
                        type: 1
                        , skin: 'layui-layer-rim'
                        , area: ['420px', '190px']
                        , content: '<div class="layui-col-md12" style="padding: 20px" id="del-box">' +
                            '        <input type="password" id="operaPass" placeholder="输入管理员密码" autocomplete="off" class="layui-input" style="border: black solid 1px">' +
                            '        <button class="layui-btn" style="float: right;margin-top: 20px" id="delEmpByNumber">确定</button>' +
                            '    </div>'
                        , title: '输入管理员密码'
                    });
                    //执行删除操作前管理员要输入管理员操作密码
                    $("#delEmpByNumber").click(function () {
                        let operaPass = $("#operaPass").val();
                        if (operaPass === null || operaPass === "") {
                            layer.msg('输入管理员密码', {offset: '250px', time: 1500, anim: 6});
                            return false;
                        }
                        var ii = layer.load(0, {shade: false});
                        layer.closeAll('page'); //关闭所有的页面层
                        setTimeout(function () {
                            let url = "delEmpByNumber";
                            let param = {operaPass: operaPass, empNumber: data.empNumber};
                            $.post(url, param, function (res) {
                                layer.close(ii);
                                if (res === 1001 || res === "1001") {
                                    table.reload('allEmp', {
                                        page: {
                                            curr: this.page //重新从第 1 页开始
                                        }
                                    });
                                    layer.msg('删除成功', {icon: 1})
                                } else if (res === 1003 || res === "1003") {
                                    layer.msg('密码错误!', {icon: 2})
                                } else {
                                    layer.msg('删除失败', {icon: 2})
                                }
                            });
                        });
                    });
                });
            } else if (obj.event === 'edit') {   //编辑员工信息
                var ii = layer.load(0, {shade: false});
                setTimeout(function () {
                    let url = "getEmpInfoByNumber";
                    let param = {empNumber: data.empNumber};
                    $.get(url, param, function (empInfo) {
                        layer.close(ii);
                        layer.open({
                            type: 1
                            ,
                            content: '<div style="padding: 15px;"><fieldset style="border: #009f95 2px solid;border-radius: 15px">' +
                                '<legend><h2 style="color: #009f95">员工信息面板</h2></legend>' +
                                ' <table class="layui-table" lay-skin="line" lay-even style="color: #009f95">' +
                                '        <colgroup><col width="200" height = "50"><col width="200" height = "50"></colgroup>' +
                                '        <tbody>' +
                                '        <tr>' +
                                '          <td>工号 : ' + empInfo.empNumber + '</td>' +
                                '        </tr>' +
                                '        <tr><td>姓名 : ' + empInfo.empName + '</td></tr>' +
                                '        <tr><td>性别 : ' + empInfo.empGender + '</td></tr>' +
                                '        <tr><td>入职时间 : ' + empInfo.addTime + '</td></tr>' +
                                '        <tr><td colspan="2">' +
                                '                部门<select  lay-verify="required" id="updateEmpDepartment" autocomplete="off">\n' +
                                '                        <option value="' + empInfo.department + '"> ' + empInfo.department + '</option>\n' +
                                '                        <option value=\'服务部\'>服务部</option>\n' +
                                '                        <option value=\'办公室\'>办公室</option>\n' +
                                '                        <option value=\'财务部\'>财务部</option>\n' +
                                '                        <option value=\'企划部\'>企划部</option>\n' +
                                '                        <option value=\'产品部\'>产品部</option>\n' +
                                '                        <option value=\'后勤部\'>后勤部</option>\n' +
                                '                    </select>\n' +
                                '                   职务 <select  lay-verify="required" id="updateEmpPosition" autocomplete="off">\n' +
                                '                        <option value="' + empInfo.empPosition + '">' + empInfo.empPosition + '</option>\n' +
                                '                        <option value=\'部长\'>部长</option>\n' +
                                '                        <option value=\'副部长\'>副部长</option>\n' +
                                '                        <option value=\'普通职工\'>普通职工</option>' +
                                '</select></td></tr>' +
                                '        <tr><td>电话 :<input id="updateEmpTel" value=" ' + empInfo.empTel + '"></td>' +
                                '<td>邮箱 :<input id="updateEmpEmail" value=" ' + empInfo.empEmail + '"></td></tr>' +
                                '        <tr><td>学历 :<select lay-verify="required" id="updateEmpEdu" autocomplete="off">\n' +
                                '                        <option value="' + empInfo.education + '">' + empInfo.education + '</option>\n' +
                                '                        <option value=\'本科\'>本科</option>\n' +
                                '                        <option value=\'研究生\'>研究生</option>\n' +
                                '                        <option value=\'大专\'>博士</option>\n' +
                                '                        <option value=\'大专\'>大专</option>\n' +
                                '                        <option value=\'中专\'>中专</option>\n' +
                                '                        <option value=\'高中\'>高中</option>\n' +
                                '                        <option value=\'初中\'>初中</option>\n' +
                                '                        <option value=\'小学\'>小学</option>\n' +
                                '                        <option value=\'其它\'>其它</option>\n' +
                                '                    </select> </td><td>出生日期 : ' + empInfo.birthday + '</td></tr>' +
                                '        <tr><td colspan="2">住址 : ' + empInfo.address + '</td></tr>' +
                                '        </tbody>' +
                                '      </table><br>' +
                                '<button style="margin-left: 200px" class="layui-btn" id="updateEmp">修改</button>' +
                                '</fieldset></div>'
                            ,
                            area: ['500px', '550px']
                            ,
                            anim: 0
                            ,
                            title: '员工信息面板'
                        });
                    });
                    $(document).delegate("#updateEmp", "click", function () {
                        let updateEmpDepartment = $("#updateEmpDepartment").val();
                        let updateEmpPosition = $("#updateEmpPosition").val();
                        let updateEmpTel = $("#updateEmpTel").val();
                        let updateEmpEmail = $("#updateEmpEmail").val();
                        let updateEmpEdu = $("#updateEmpEdu").val();
                        if (updateEmpTel === null || updateEmpTel === "" ||
                            updateEmpEmail === null || updateEmpEmail === ""
                        ) {
                            layer.msg('填写完整的信息', {offset: '250px', time: 1500, anim: 6});
                        }

                        let url = "updateEmp";
                        let param = {
                            empNumber: data.empNumber
                            , updateEmpDepartment: updateEmpDepartment
                            , updateEmpPosition: updateEmpPosition
                            , updateEmpTel: updateEmpTel
                            , updateEmpEmail: updateEmpEmail
                            , updateEmpEdu: updateEmpEdu
                        };
                        $.post(url, param, function (data) {
                            table.reload('allEmp', {
                                page: {
                                    curr: this.page //重新从第 1 页开始
                                }
                            });
                            if (data === true || date === "true") {
                                layer.alert('修改成功', {
                                    skin: 'layui-layer-molv'
                                    , closeBtn: 0
                                });
                            } else {
                                layer.alert('修改成功', {
                                    skin: 'layui-layer-molv'
                                    , closeBtn: 0
                                });
                            }
                        })
                    })
                });
            } else if (obj.event === 'query') {   //查询员工详细信息 包括密码和密保
                var ii = layer.load(0, {shade: false});
                setTimeout(function () {
                    let url = "getEmpInfoByNumber";
                    let param = {empNumber: data.empNumber};
                    $.get(url, param, function (empInfo) {
                        layer.close(ii);
                        layer.open({
                            type: 1
                            ,
                            content: '<div style="padding: 15px;"><fieldset style="border: #009f95 2px solid;border-radius: 15px">' +
                                '<legend><h2 style="color: #009f95">员工信息面板</h2></legend>' +
                                ' <table class="layui-table" lay-skin="line" lay-even style="color: #009f95">' +
                                '        <colgroup><col width="100"><col width="300"></colgroup>' +
                                '        <tbody>' +
                                '        <tr>' +
                                '          <td rowspan="4"><img  src="../static/images/' + empInfo.imgPath + '" style="width: 150px;height: 150px;margin-left: 20px"></td>' +
                                '          <td>工号 : ' + empInfo.empNumber + '</td>' +
                                '        </tr>' +
                                '        <tr><td>姓名 : ' + empInfo.empName + '</td></tr>' +
                                '        <tr><td>性别 : ' + empInfo.empGender + '</td></tr>' +
                                '        <tr><td>入职时间 : ' + empInfo.addTime + '</td></tr>' +
                                '        <tr><td>所属部门 : ' + empInfo.department + '</td><td>工作岗位 : ' + empInfo.empPosition + '</td></tr>' +
                                '        <tr><td>电话 : ' + empInfo.empTel + '</td><td>邮箱 : ' + empInfo.empEmail + '</td></tr>' +
                                '        <tr><td>学历 : ' + empInfo.education + '</td><td>出生日期 : ' + empInfo.birthday + '</td></tr>' +
                                '        <tr><td colspan="2">住址 : ' + empInfo.address + '</td></tr>' +
                                '        </tbody>' +
                                '      </table><br></fieldset></div>'
                            ,
                            area: ['450px', '550px']
                            ,
                            anim: 0
                            ,
                            title: '员工信息面板'
                        });
                    });
                });
            } else if (obj.event === 'getEmpPass') {
                layer.open({
                    type: 1,
                    skin: 'layui-layer-rim',
                    area: ['420px', '190px'],
                    content: '<div class="layui-col-md12" style="padding: 20px" id="del-box">' +
                        '        <input type="password" id="operaPass" placeholder="输入管理员密码" autocomplete="off" class="layui-input" style="border: black solid 1px">' +
                        '        <button class="layui-btn" style="float: right;margin-top: 20px" id="getEmpPass">确定</button>' +
                        '    </div>',
                    title: '输入管理员密码'
                });
                //执行删除操作前管理员要输入管理员操作密码
                $("#getEmpPass").click(function () {
                    let operaPass = $("#operaPass").val();
                    if (operaPass === null || operaPass === "") {
                        layer.msg('输入管理员密码', {offset: '250px', time: 1500, anim: 6});
                        return false;
                    }
                    var ii = layer.load(0, {shade: false});
                    layer.closeAll('page'); //关闭所有的页面层
                    setTimeout(function () {
                        let url = "/getEmpPass";
                        let param = {operaPass: operaPass, empNumber: data.empNumber};
                        $.post(url, param, function (res) {
                            layer.close(ii);
                            if (res[0] === 1001 || res[0] === "1001") {
                                layer.closeAll();
                                layer.open({
                                    type: 1
                                    ,
                                    content: '<div style="padding: 15px;"><fieldset style="border: #009f95 2px solid;border-radius: 15px">' +
                                        '<legend><h2 style="color: #009f95">员工密码信息</h2></legend>' +
                                        ' <table class="layui-table" lay-skin="line" lay-even style="color: #009f95">' +
                                        '        <colgroup><col width="100"><col width="300"></colgroup>' +
                                        '        <tbody>' +
                                        '        <tr><td style="text-align: right">工号  </td><td> ' + data.empNumber + '</td></tr>' +
                                        '        <tr><td style="text-align: right">姓名  </td><td> ' + data.empName + '</td></tr>' +
                                        '        <tr><td style="text-align: right">密码  </td><td><input id="empPass" class="layui-input" style="border: black solid 1px" type="text" value="' + res[1] + '"></td></tr>' +
                                        '        <tr><td style="text-align: right">密保问题  </td><td><input id="empQues" class="layui-input" style="border: black solid 1px" type="text" value="' + res[2] + '"></td></tr>' +
                                        '        <tr><td style="text-align: right">密保答案      </td><td><input id="empAns" class="layui-input" style="border: black solid 1px"  type="text" value="' + res[3] + '"></td></tr>' +
                                        '        </tbody>' +
                                        '        <tfoot>' +
                                        '        <tr><td colspan="2">' +
                                        '        <button class="layui-btn" style="float: left;margin-left: 70px" id="updateEmpPass">修改</button>' +
                                        '        <button class="layui-btn" style="float: right;margin-right: 70px" id="closeEmpPass">关闭</button>' +
                                        '        </td></tr>' +
                                        '        </tfoot>' +
                                        '      </table></fieldset></div>'
                                    ,
                                    area: ['400px', '480px']
                                    ,
                                    anim: 0
                                    ,
                                    title: '员工密码信息'
                                });
                                $("#closeEmpPass").click(function () {
                                    layer.closeAll();
                                });
                                $("#updateEmpPass").click(function () {
                                    let empPass = $("#empPass").val();
                                    let empQues = $("#empQues").val();
                                    let empAns = $("#empAns").val();
                                    if (empPass === null || empQues === null || empAns === null) {
                                        layer.msg('信息不能为空', {offset: '250px', time: 1500, anim: 6});
                                    }
                                    let url = "updateEmpPass";
                                    let param = {
                                        empPass: empPass,
                                        empQues: empQues,
                                        empAns: empAns,
                                        empNumber: data.empNumber
                                    };
                                    $.post(url, param, function (res) {
                                        layer.closeAll();
                                        if (res === true || res === "true") {
                                            layer.msg('修改成功', {icon: 1})
                                        } else {
                                            layer.msg('修改失败', {icon: 2})
                                        }
                                    });
                                });
                            } else if (res[0] === 1003 || res[0] === "1003") {
                                layer.msg('密码错误!', {icon: 2})
                            } else {
                                layer.msg('查询失败', {icon: 2})
                            }
                        });
                    });
                });

            }
        });


        /*添加新员工信息合作*/
        $("#addEmp").click(function () {
            addEmp();
        });
        $("#addEmp-1").click(function () {
            addEmp();
        });

        function addEmp() {
            layer.open({
                type: 1
                , skin: 'layui-layer-rim'
                , area: ['840px', '600px']
                , content: $("#add-info-box")
                , title: '添加新员工--填写以下信息'
                , end: function (res) {
                    $("#add-info-box").css("display", 'none');
                }
            });
        }

        $("#add-emp-btn").click(function () {
            let addEmpName = $("#addEmpName").val();
            let addEmpTel = $("#addEmpTel").val();
            let addEmpEmail = $("#addEmpEmail").val();
            let addEmpDepartment = $("#addEmpDepartment").val();
            let addEmpPosition = $("#addEmpPosition").val();
            let addEmpGender = $("#addEmpGender").val();
            let addEmpEdu = $("#addEmpEdu").val();
            let addEmpBirthday = $("#test-laydate-format-date1").val();
            let addEmpDetailAd = $("#addEmpDetailAd").val();
            let province = $("#province").val();
            let city = $("#city").val();
            let district = $("#district").val();
            let address = province + city + district + addEmpDetailAd;
            if (addEmpName === null || addEmpName === "" ||
                addEmpTel === null || addEmpTel === "" ||
                addEmpEmail === null || addEmpEmail === "" ||
                addEmpDepartment === null || addEmpDepartment === "" ||
                addEmpPosition === null || addEmpPosition === "" ||
                addEmpGender === null || addEmpGender === "" ||
                addEmpEdu === null || addEmpEdu === "" ||
                addEmpBirthday === null || addEmpBirthday === "" ||
                addEmpDetailAd === null || addEmpDetailAd === "" ||
                province === null || province === "" ||
                address === null || address === "" ||
                city === null) {
                layer.msg('请填写完整的信息', {offset: '250px', time: 1500, anim: 6});
                return false;
            }
            if (!checkAddEmail() || !checkAddTel()) {
                layer.msg('填写信息有误，请核对', {offset: '250px', time: 1500, anim: 6});
                return false;
            }
            var ii = layer.load(0, {shade: false});
            layer.closeAll('page'); //关闭所有的页面层
            setTimeout(function () {
                let url = "addEmp";
                let param = {
                    addEmpName: addEmpName, addEmpTel: addEmpTel, addEmpEmail: addEmpEmail
                    , addEmpDepartment: addEmpDepartment, addEmpPosition: addEmpPosition,
                    addEmpGender: addEmpGender, addEmpEdu: addEmpEdu, addEmpBirthday: addEmpBirthday, address: address
                };
                $.post(url, param, function (empInfo) {
                    layer.close(ii);
                    if (empInfo === null || empInfo === "") {
                        layer.msg('添加失败', {offset: '250px', time: 1500, anim: 6});
                    } else {
                        table.reload('allEmp', {
                            page: {
                                curr: this.page //重新从第 1 页开始
                            }
                        });
                        layer.msg('添加成功', {icon: 1})
                        layer.open({
                            type: 1
                            ,
                            content: '<div style="padding: 15px;"><fieldset style="border: #009f95 2px solid;border-radius: 15px">' +
                                '<legend><h2 style="color: #009f95">新添加员工信息面板</h2></legend>' +
                                ' <table class="layui-table" lay-skin="line" lay-even style="color: #009f95">' +
                                '        <colgroup><col width="150" height = "50"><col width="200" height = "50"></colgroup>' +
                                '        <tbody>' +
                                '        <tr style="color: red"><td colspan="2">  密码 : ' + empInfo.empPassword + '  务必将此项信息转告员工!</td></tr>' +
                                '        <tr>' +
                                '          <td rowspan="4"><img  src="../static/images/' + empInfo.imgPath + '" style="width: 150px;height: 150px;margin-left: 20px"></td>' +
                                '          <td style="color: red">工号 : ' + empInfo.empNumber + '</td>' +
                                '        </tr>' +
                                '        <tr><td>姓名 : ' + empInfo.empName + '</td></tr>' +
                                '        <tr><td>性别 : ' + empInfo.empGender + '</td></tr>' +
                                '        <tr><td>入职时间 : ' + empInfo.addTime + '</td></tr>' +
                                '        <tr><td>所属部门 : ' + empInfo.department + '</td><td>工作岗位 : ' + empInfo.empPosition + '</td></tr>' +
                                '        <tr><td>电话 : ' + empInfo.empTel + '</td><td>邮箱 : ' + empInfo.empEmail + '</td></tr>' +
                                '        <tr><td>学历 : ' + empInfo.education + '</td><td>出生日期 : ' + empInfo.birthday + '</td></tr>' +
                                '        <tr><td colspan="2">住址 : ' + empInfo.address + '</td></tr>' +
                                '        </tbody>' +
                                '      </table><br></fieldset></div>'
                            ,
                            area: ['450px', '550px']
                            ,
                            anim: 0
                            ,
                            shadeClose: true
                            ,
                            title: '添加成功'
                        });

                    }
                });
            });
            return false;
        });


    });

    /*验证添加信息的合法性*/
    function checkAddTel() {
        let addEmpTel = $("#addEmpTel").val();
        let telRel = /^1\d{10}$/;
        if (!telRel.test(addEmpTel)) {
            $("#checkTel").html("请填写正确到的电话号码");
            return false;
        } else {
            $("#checkTel").html("");
            return true;
        }
    }

    function checkAddEmail() {
        let addEmpEmail = $("#addEmpEmail").val();
        let emailRel = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})/;
        if (!emailRel.test(addEmpEmail)) {
            $("#checkEmail").html("请填写正确到的电子邮箱");
            return false;
        } else {
            $("#checkEmail").html("");
            return true;
        }
    }
</script>


<script src="../static/js/jquery.min.js" type="text/javascript"></script>
<script src="../static/js/areaList.js" type="text/javascript"></script>

<!--三级地级市选择栏-->
<script type="text/javascript">
    layui.use(['form', 'laydate'], function () {
        var form = layui.form,
            laydate = layui.laydate;

        //自定义日期格式
        laydate.render({
            elem: '#test-laydate-format-date1'
            , format: 'yyyy-MM-dd'
        });

        var province = $("#province"),
            city = $("#city"),
            district = $("#district");

        //初始将省份数据赋予
        for (var i = 0; i < provinceList.length; i++) {
            addEle(province, provinceList[i].name);
        }

        //赋予完成 重新渲染select
        form.render('select');

        //向select中 追加内容
        function addEle(ele, value) {
            var optionStr = "";
            optionStr = "<option value=" + value + " >" + value + "</option>";
            ele.append(optionStr);
        }

        //移除select中所有项 赋予初始值
        function removeEle(ele) {
            ele.find("option").remove();
            var optionStar = "<option value=" + "0" + ">" + "请选择" + "</option>";
            ele.append(optionStar);
        }

        var provinceText,
            cityText,
            cityItem;
        //选定省份后 将该省份的数据读取追加上
        form.on('select(province)', function (data) {
            provinceText = data.value;
            $.each(provinceList, function (i, item) {
                if (provinceText == item.name) {
                    cityItem = i;
                    return cityItem;
                }
            });
            removeEle(city);
            removeEle(district);
            $.each(provinceList[cityItem].cityList, function (i, item) {
                addEle(city, item.name);
            })
            //重新渲染select
            form.render('select');
        })
        ////选定市或直辖县后 将对应的数据读取追加上
        form.on('select(city)', function (data) {
            cityText = data.value;
            removeEle(district);
            $.each(provinceList, function (i, item) {
                if (provinceText == item.name) {
                    cityItem = i;
                    return cityItem;
                }
            });
            $.each(provinceList[cityItem].cityList, function (i, item) {
                if (cityText == item.name) {
                    for (var n = 0; n < item.areaList.length; n++) {
                        addEle(district, item.areaList[n]);
                    }
                }
            });
            //重新渲染select
            form.render('select');
        });
    });
</script>

</html>


